Selectively disabling pan and zoom for a TGML page

You can disable pan and zoom on specific components. This is particularly useful for custom menu systems and banners within diagrams.

To disable pan and zoom on specific components:

1. In Graphics Editor, group the components for which you want to disable pan and zoom.

2. Give the group a DisablePanAndZoom attribute.

3. Within the group, set the position of at least one object to the following:

Left 0.0

Top 0.0

4. To the group, add the following Scale and Translate objects as children and name them disablePanZoomScale, disablePanResizeScale, and disablePanZoomTranslate respectively.

5. Add the following script element to the bottom of the TGML document. Specify it as your on document load behavior. This will allow you to repeat this procedure for as many groups on the page as needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var xlates = [];
var scales = [];
var rscales = [];
function antiZoom(d,evt){
    scales.filter(s => s!=null).forEach((s,i)=>{
                s.setAttribute("ScaleX", 1/d.view.zoomLevel);
                s.setAttribute("ScaleY", 1/d.view.zoomLevel)
            });
    xlates.filter(s => s!=null).forEach((t)=>{
                 t.setAttribute("X", d.view.scrollLeft);
                t.setAttribute("Y", d.view.scrollTop);
            });
  const w = view.width / d.getDocumentElement().getAttribute("Width");  
  const h = view.height / d.getDocumentElement().getAttribute("Height");                      
  rscales.filter(s => s!=null).forEach((r)=>{
            r.setAttribute("ScaleX", w);
            r.setAttribute("ScaleY", h);
    });         
}       
function onLoad(evt){        
    var t=evt.getCurrentTarget();
    view.addEventListener('resize', function (evt) {
        antiZoom(t.getOwnerDocument(),evt);
    });
    Array.from(t.getOwnerDocument().getElementsByTagName("Group")).forEach((g)=>{
            if(g.getAttribute("DisablePanAndZoom")){
                scales.push(g.getChild("disablePanZoomScale"));
                xlates.push(g.getChild("disablePanZoomTranslate"));
                rscales.push(g.getChild("disablePanResizeScale"));
            }
        });
            antiZoom(t.getOwnerDocument(),evt);
    }